<template>
  <div   style="margin :10px;">
    <el-input v-if="is_url>0" size="small" class="input-with-select" v-model="list[0].url" placeholder="请选择跳转地址" >
      <el-button slot="append" icon="el-icon-search" @click="click(0)">选择链接</el-button>
    </el-input>
    <template v-if="is_url==0">
    <el-button type="success" size="mini" class="el-icon-plus" style="height:30px;margin-top:5px;margin-left:10px" round @click="addClick()">增加</el-button>
    <draggable v-model="list_arr" :options="dragOptions" @end="onEnd">
      <transition-group tag="div" id="doing" class="item-ul-d" style="    align-items: flex-start;">
    <div class="form-flex-row show_box"  v-for="(item,i) in list" :key="i" style="position: relative;border:1px solid #DCDFE6;margin-bottom:10px;padding:10px">
     
      <upload-pic v-if="no_thumb==0" :thumb="list[i].thumb" @update:thumb="list[i].thumb=$event" :width="width" :height="height" :append="append" cate_id="3" style="text-align: center;width:120px"/>
      <div class="box">
         <!-- <i class="el-icon-error show_cha" style="" @click="del(i)"/> -->
        <div class="form-flex-row bt_title">
           <el-input size="small" class="input-with-select nav-title" v-model="list[i].title" placeholder="请输入标题"  >
             <template slot="prepend">文字</template>
            </el-input>
           <div class="yanse_box form-flex-row " >
             <div style="margin :0 5px">文字颜色</div>
             <el-color-picker :predefine="predefineColors" show-alpha v-model="list[i].color" style="margin :0 5px"></el-color-picker>
             <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(i)"></el-button>
           </div>
        </div>   
      <el-tooltip class="item" effect="dark" content="可拖动排序" placement="top-start">
       <el-input size="small" class="input-with-select nav-title" v-model="list[i].title" placeholder="请输入标题"  >
             <template slot="prepend">文字</template>

        </el-input>
        <el-input size="small" class="input-with-select" v-model="list[i].url" placeholder="请选择跳转地址" >
          <el-button slot="append" icon="el-icon-search" @click="click(i)">选择链接</el-button>
        </el-input>
      </el-tooltip>
      <dir v-if="horn==1">
        <div class="form-flex-row jb_shuliang">
          <div class="jiaobiao" style="margin :0 5px">角标样式:</div>
          <!-- 选框 -->
          <el-radio-group  v-model="list[i].horn" type="success" size="small" >
            <el-radio-button v-for="(op,j) in ['无','样式一','样式二','样式三']" :key="j" :label="j">{{op}}</el-radio-button>
          </el-radio-group>
        </div>
        <el-input size="small" class="input-with-select nav-title" v-model="list[i].horn_title" placeholder="请输入标题"  >
          <template slot="prepend">角标文字</template>
        </el-input>
      </dir>

      </div>
    </div>
      </transition-group>
    </draggable>
    </template>
    <drawer title="选择跳转地址" :isShow="money_visible"  @update:isShow="money_visible=false" width=".5">
    <url-address style="margin-left:10px" @selectMenu="selectMenu" ></url-address>
    </drawer>
  </div>
</template>

<script>
import urlAddress from '@/components/url_address/urlAddress'
import draggable from 'vuedraggable'
export default {
  components: { urlAddress,draggable},
  name:'UploadBannersUrl',
  props: {
    list: {
      type: Array,
      default: []
    },
    width: {
      type: String,
      default: '150'
    },
    height: {
      type: String,
      default: '150'
    },
    horn: {//角标
      type: Number,
      default: 0
    },
    max_size: {
      type: Number,
      default: 512
    },
    no_thumb: {
      type: Number,
      default: 0
    },
    is_url: {
      type: Number,
      default: 0
    },
    append: { //在多层中弹出
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      predefineColors:['rgba(0, 0, 0, 0)','#ffffff','#f0f0f0','#ff4500','#ff8c00','#ffd700','#90ee90','#00ced1','#1e90ff','#c71585',],
      dragOptions:{
          animation: 120,
          scroll: true,
          group: 'sortlist',
          ghostClass: 'ghost-style'
      },
      thumb:'',
      index:0,
      money_visible:false,
      list_arr:[],
    };
  },
  mounted() {
    if(this.is_url>0){
      if(this.list.length==0){
        this.list.push({url:''})
      }
      console.log(this.list)
    }else{
      this.list_arr=this.list
    }
  },
  methods: {
    addClick(){
      if(this.list.length>0){
        this.list.unshift(JSON.parse(JSON.stringify(this.list[0])))
      }else{
        const obj={thumb:'',url:'',title:''}
        if(this.horn==1){
          obj.horn=0
          obj.horm_title=''
        }
        this.list.unshift(obj)
      }
    },
     //拖拽结束事件
       onEnd() {
         for(let i in this.list_arr){
           this.$set(this.list,i,this.list_arr[i])
         }
      },
      click(index){
        this.index=index
        this.money_visible=true
      },
      selectMenu (item) {
          this.list[this.index].url = item.path
          this.list[this.index].title = item.title
          this.money_visible=false
      },
    del(i){
      this.$msg_confirm().then((e) => {
        this.$delete(this.list,i)
      });
    },
    upload(url){
      this.thumb=''
      const obj={thumb:url,url:'',title:''}
      if(this.horn==1){
        obj.horn=0
        obj.horm_title=''
      }
      this.list.push(obj)
    }
  }
};
</script>

<style >
.show_cha{
  position: absolute;
  right: 0px;
  top: -30px;
  font-size: 24px;
  z-index: 10;
  color: rgba(0,0,0,.5);
  
}
@media (max-width:550px) {
    .show_box{
      width:170px
    }
    .show_cha{
    position: absolute;
    right: 4px;
    top: -8px;
    font-size: 24px;
    z-index: 10;
    color: #ff0000;
  }
}
/* 拖拽 */
    .item-ul-d{
        /* padding: 0 8px 8px; */

        overflow-y: scroll;
        padding: 10px;
    }
    .item-ul-d::-webkit-scrollbar{
        width: 0;
    }

        .drag-list {
        border: 1px #e1e4e8 solid;
        padding: 10px;
        margin: 5px 0 10px;
        list-style: none;
        background-color: #fff;
        border-radius: 6px;
        cursor: pointer;
        -webkit-transition: border .3s ease-in;
        transition: border .3s ease-in;
    }
    .drag-list:hover {
        border: 1px solid #20a0ff;
    }
/* 拖拽 */

.txt_right{
  background-color: #f3f7f9;
  border-left: 1px solid #DCDFE6;
  border-right: 1px solid #DCDFE6;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
 
  position: absolute;
  z-index: 5;
  text-align: center;
  right: 0;
}
.bt_title{
  
  position: relative;
  margin-bottom: 5px;
  
}


.yanse_box{
  width: 300px;
  height: 32px;
  line-height: 32px;
  padding-left: 5px;
  border-radius: 5px;
}
.jiaobiao{
    color: #909399;
    vertical-align: middle;
    display: table-cell;
    position: relative;

    height: 30px;
    line-height: 30px;
    white-space: nowrap;
}
.jb_shuliang{
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  height: 32px;
  line-height: 32px;
}
.box{
  margin-bottom: 15px;
  position: relative;
}
</style>